<!doctype html>
<html lang="zh-CN">
 <head> 
  <meta charset="utf-8"> 
  <meta content="width=device-width, initial-scale=1.0" name="viewport"> 
  <title>年度规划项目 - 学员端</title> 
  <script src="../javascript/reload.js"></script> 
  <script src="./1969787710210048000/resource_1565210000.js"></script> 
  <link href="./1969787710210048000/all.min.css" rel="stylesheet"> 
  <script src="./1969787710210048000/echarts.min.js"></script> 
  <script>tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        accent: '#0E42D2',
                        neutral: '#F5F7FA',
                        'neutral-dark': '#E5E6EB',
                        'text-primary': '#1D2129',
                        'text-secondary': '#4E5969',
                        'text-tertiary': '#86909C',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    spacing: {
                        '220': '220px',
                        '250': '250px',
                    }
                },
            }
        }</script> 
  <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .scrollbar-hide {
                -ms-overflow-style: none;
                scrollbar-width: none;
            }
            .scrollbar-hide::-webkit-scrollbar {
                display: none;
            }
            .menu-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .menu-item {
                @apply flex items-center px-4 py-3 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer;
            }
            .menu-item-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .submenu-item {
                @apply flex items-center px-8 py-2.5 text-text-secondary hover:bg-neutral-dark transition-all duration-200 cursor-pointer text-sm;
            }
            .submenu-item-active {
                @apply bg-primary/10 text-primary;
            }
            .card-shadow {
                box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.06);
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-accent transition-all duration-200 flex items-center justify-center;
            }
            .btn-secondary {
                @apply bg-white text-primary border border-primary px-4 py-2 rounded-md hover:bg-primary/5 transition-all duration-200 flex items-center justify-center;
            }
            .btn-outline {
                @apply bg-white text-text-secondary border border-neutral-dark px-4 py-2 rounded-md hover:bg-neutral transition-all duration-200 flex items-center justify-center;
            }
            .input-field {
                @apply w-full px-3 py-2 border border-neutral-dark rounded-md focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary transition-all duration-200;
            }
            .table-header {
                @apply bg-neutral text-text-secondary text-sm font-medium px-4 py-3;
            }
            .table-row {
                @apply border-b border-neutral-dark hover:bg-neutral/50 transition-all duration-200;
            }
            .badge {
                @apply px-2 py-1 rounded-full text-xs font-medium;
            }
            .badge-success {
                @apply bg-green-100 text-green-700;
            }
            .badge-warning {
                @apply bg-yellow-100 text-yellow-700;
            }
            .badge-danger {
                @apply bg-red-100 text-red-700;
            }
            .badge-info {
                @apply bg-blue-100 text-blue-700;
            }
            .badge-purple {
                @apply bg-purple-100 text-purple-700;
            }
            .badge-gray {
                @apply bg-gray-100 text-gray-700;
            }
            .stat-card {
                @apply bg-white rounded-lg p-5 card-shadow transition-all duration-300 hover:shadow-lg;
            }
            .progress-ring-container {
                @apply relative flex items-center justify-center w-32 h-32 mx-auto;
            }
            .progress-ring-text {
                @apply absolute text-center;
            }
            .progress-ring-value {
                @apply text-2xl font-bold text-primary;
            }
            .progress-ring-label {
                @apply text-xs text-text-tertiary;
            }
        }
    </style> 
 </head> 
 <body class="font-inter bg-neutral text-text-primary h-screen flex overflow-hidden"> 
  <!-- 左侧菜单区域 --> 
  <aside class="w-220 bg-white h-full shadow-md z-10 transition-all duration-300 ease-in-out" id="sidebar"> 
   <!-- 品牌标识 --> 
   <div class="flex items-center justify-center h-16 border-b border-neutral-dark"> 
    <div class="flex items-center"> 
     <i class="fas fa-chart-line text-primary text-2xl mr-3"> </i> 
     <h1 class="text-xl font-bold text-primary"> Hi Quick AI </h1> 
    </div> 
   </div> 
   <!-- 菜单列表 --> 
   <nav class="py-4 h-[calc(100%-4rem)] overflow-y-auto scrollbar-hide"> 
    <div class="menu-group">
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1181&amp;h=762&amp;appuuid=1969721745313103872&amp;version=2&amp;pageType=web&amp;uuid=1968264071639728128&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="monthly" data-selectorname="#id-pe1s4" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-calendar-check text-lg mr-3"> </i> 
        <span class="" contenteditable="false" style="outline: none;"> 工作台 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-monthly"> 
     </div> 
    </div> 
    <!-- 公司公告 --> 
    <div class="menu-group"> 
     <a class="yt-a-defalut-link menu-item flex justify-between" custom-a="true" custom-href="w=1170&amp;h=728&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1968578812111224832&amp;appName=年规学员端最新版1.1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: inline; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
      <div class="menu-item flex justify-between" data-menu="announcements" data-selectorname="#id-wgtje" style="background-color:#ffffffff"> 
       <div class="flex items-center"> 
        <i class="fas fa-bullhorn text-lg mr-3"> </i> 
        <span> 公司公告 </span> 
       </div> 
      </div> </a> 
     <div class="submenu hidden" id="submenu-announcements"> 
     </div> 
    </div> 
    <!-- 年规管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between menu-item-active" data-menu="planning"> 
      <div class="flex items-center"> 
       <i class="fas fa-bullseye text-lg mr-3"> </i> 
       <span> 年规管理 </span> 
      </div> 
      <i class="fas fa-chevron-down text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu" id="submenu-planning"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967790023482802176&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item submenu-item-active" data-page="goal-dashboard" data-selectorname="#id-fu447" style> 
        <i class="fas fa-chart-pie text-xs mr-2"> </i> 
        <span style> 目标进度看板 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1390&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969803110087917568&amp;appName=demo1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="performance-entry" data-selectorname="#id-zz6el" style> 
        <i class="fas fa-pencil-alt text-xs mr-2"> </i> 
        <span> 业绩回填 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967832363245240320&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="product-library" data-selectorname="#id-o7i6w" style> 
        <i class="fas fa-box text-xs mr-2"> </i> 
        <span> 产品库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1321&amp;h=831&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1969766167933353984&amp;appName=demo1" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="marketing-plan" data-selectorname="#id-yvhab" style> 
        <i class="fas fa-bullhorn text-xs mr-2"> </i> 
        <span style> 营销计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967839529905684480&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="customer-records" data-selectorname="#id-eyl04" style> 
        <i class="fas fa-users text-xs mr-2"> </i> 
        <span style> 客户档案 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967841389332922368&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="pk-activities" data-selectorname="#id-l6xtb" style> 
        <i class="fas fa-trophy text-xs mr-2"> </i> 
        <span> PK 活动 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 工作管理 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="work"> 
      <div class="flex items-center"> 
       <i class="fas fa-briefcase text-lg mr-3"> </i> 
       <span> 工作管理 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-work"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967843857995399168&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="work-dashboard" data-selectorname="#id-5odbl" data-ytextravalue="extra-r73yvc9mw" style> 
        <i class="fas fa-chart-bar text-xs mr-2" data-ytindex="0" data-ytoriginindex="0"> </i> 
        <span data-ytindex="1" data-ytoriginindex="1" data-ytparentvalue="extra-r73yvc9mw" style> 周日报管理 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967850301578805248&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="meeting-plan" data-selectorname="#id-uk7jx" style> 
        <i class="fas fa-calendar-alt text-xs mr-2"> </i> 
        <span style> 会议计划 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967852373321711616&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="work-tasks" data-selectorname="#id-e6d40" style> 
        <i class="fas fa-tasks text-xs mr-2"> </i> 
        <span> 工作任务 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 学习成长 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="learning"> 
      <div class="flex items-center"> 
       <i class="fas fa-graduation-cap text-lg mr-3"> </i> 
       <span> 学习成长 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" data-ytextravalue="extra-1f77idw5g" id="submenu-learning"> 
      <div class="submenu-item" data-page="company-culture" data-ytindex="0" data-ytoriginindex="0"> 
       <i class="fas fa-building text-xs mr-2"> </i> 
       <span> 企业文化 </span> 
      </div> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868783729049600&amp;appName=年规学员端左侧菜单版" data-ytindex="1" data-ytoriginindex="1" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="course-center" data-selectorname="#id-vu2di" style> 
        <i class="fas fa-book-open text-xs mr-2"> </i> 
        <span> 课程中心 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868795963834368&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="false" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="knowledge-base" data-selectorname="#id-6neft" data-ytindex="2" data-ytoriginindex="2" data-ytparentvalue="extra-1f77idw5g" style="opacity: 1;"> 
        <i class="fas fa-book text-xs mr-2"> </i> 
        <span> 知识库 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868797977100288&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="learning-plan" data-selectorname="#id-wbesp" data-ytindex="3" data-ytoriginindex="3" style> 
        <i class="fas fa-clipboard-list text-xs mr-2" style> </i> 
        <span style> 学习计划 </span> 
       </div> </a> 
     </div> 
    </div> 
    <!-- 个人档案 --> 
    <div class="menu-group"> 
     <div class="menu-item flex justify-between" data-menu="profile"> 
      <div class="flex items-center"> 
       <i class="fas fa-user text-lg mr-3"> </i> 
       <span> 个人档案 </span> 
      </div> 
      <i class="fas fa-chevron-right text-xs transition-transform duration-200"> </i> 
     </div> 
     <div class="submenu hidden" id="submenu-profile"> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868800292356096&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="basic-info" data-selectorname="#id-pkt67" style> 
        <i class="fas fa-id-card text-xs mr-2"> </i> 
        <span style> 基本信息 </span> 
       </div> </a> 
      <a class="yt-a-defalut-link submenu-item flex" custom-a="true" custom-href="w=1228&amp;h=797&amp;appuuid=1969721745313103872&amp;version=1&amp;pageType=web&amp;uuid=1967868801315766272&amp;appName=年规学员端左侧菜单版" href="javascript:void(0);" is-add="true" is-page="true" onclick="ytCustomLinkNavigation()" style="display: flex; padding: 0px; border: 0px; box-shadow: none;" target="_top"> 
       <div class="submenu-item" data-page="account-settings" data-selectorname="#id-uiycm" style> 
        <i class="fas fa-cog text-xs mr-2"> </i> 
        <span> 账号设置 </span> 
       </div> </a> 
     </div> 
    </div> 
   </nav> 
  </aside> 
  <!-- 右侧内容区域 --> 
  <main class="flex-1 flex flex-col overflow-hidden"> 
   <!-- 顶部导航栏 --> 
   <header class="h-16 bg-white border-b border-neutral-dark flex items-center justify-between px-6 z-10"> 
    <div class="flex items-center"> 
     <button class="mr-4 text-text-secondary hover:text-primary transition-colors duration-200" id="toggle-sidebar"> <i class="fas fa-bars text-xl"> </i> </button> 
     <div class="text-sm text-text-tertiary" id="breadcrumb"> 
      <span> 年规管理 </span> 
      <i class="fas fa-angle-right mx-2 text-xs"> </i> 
      <span> 目标进度看板 </span> 
     </div> 
    </div> 
    <div class="flex items-center space-x-6"> 
     <div class="relative"> 
      <input class="pl-10 pr-4 py-2 rounded-full text-sm border border-neutral-dark focus:outline-none focus:ring-2 focus:ring-primary/30 focus:border-primary w-64" placeholder="搜索..." type="text"> 
      <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-text-tertiary"> </i> 
     </div> 
     <div class="relative"> 
      <button class="relative text-text-secondary hover:text-primary transition-colors duration-200"> <i class="fas fa-bell text-xl"> </i> <span class="absolute top-0 right-0 w-2 h-2 bg-red-500 rounded-full"> </span> </button> 
     </div> 
     <div class="flex items-center cursor-pointer group"> 
      <img alt="用户头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all duration-200" src="./1969787710210048000/f48e4ae6256cb09fa61d11486866b14f.png"> 
      <div class="ml-2 hidden md:block"> 
       <div class="text-sm font-medium">
         张明 
       </div> 
       <div class="text-xs text-text-tertiary">
         销售部 
       </div> 
      </div> 
      <i class="fas fa-angle-down ml-1 text-text-tertiary"> </i> 
     </div> 
    </div> 
   </header> 
   <!-- 内容滚动区域 --> 
   <div class="flex-1 overflow-y-auto p-6 bg-neutral" id="content-area"> 
    <!-- [MODULE] abc_主内容区域 --> 
    <main class="x"> 
     <!-- [MODULE] d23_目标进度看板页面 --> 
     <div class="x" id="goal-dashboard-page"> 
      <!-- 目标进度看板页面 --> 
      <div class="page active" id="page-goal-dashboard"> 
       <div class="flex justify-between items-center mb-6"> 
        <h2 class="text-2xl font-bold"> 目标进度看板 </h2> 
        <div class="flex space-x-3"> 
         <div class="relative"> 
          <select class="input-field pr-8 appearance-none bg-white"> <option> 2023年度 </option> <option> 2022年度 </option> <option> 2021年度 </option> </select> 
          <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-text-tertiary pointer-events-none"> </i> 
         </div> 
         <button class="btn-outline"> <i class="fas fa-download mr-2"> </i> 导出报告 </button> 
         <button class="btn-primary"> <i class="fas fa-refresh mr-2"> </i> 刷新数据 </button> 
        </div> 
       </div> 
       <!-- [MODULE] 33f_目标进度看板页面:个人业绩总览 --> 
       <div class="x"> 
        <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-chart-line text-primary mr-2"> </i> 个人业绩总览 </h3> 
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> 
         <!-- 年度销售额目标 --> 
         <div class="bg-white rounded-lg card-shadow p-6"> 
          <div class="flex justify-between items-start mb-6"> 
           <div> 
            <h4 class="text-lg font-semibold mb-1"> 年度销售额目标 </h4> 
            <p class="text-text-tertiary text-sm"> 截至当前销售业绩完成情况 </p> 
           </div> 
           <span class="badge badge-success"> 75% </span> 
          </div> 
          <div class="flex items-center"> 
           <div class="progress-ring-container"> 
            <canvas id="salesProgressRing"> 
            </canvas> 
            <div class="progress-ring-text"> 
             <div class="progress-ring-value">
               75% 
             </div> 
             <div class="progress-ring-label">
               完成率 
             </div> 
            </div> 
           </div> 
           <div class="ml-6 flex-1"> 
            <div class="flex justify-between items-end mb-1"> 
             <span class="text-2xl font-bold"> ¥750,000 </span> 
             <span class="text-text-tertiary text-sm"> 目标: ¥1,000,000 </span> 
            </div> 
            <div class="w-full bg-neutral rounded-full h-2"> 
             <div class="bg-primary h-2 rounded-full" style="width: 75%"> 
             </div> 
            </div> 
            <div class="flex justify-between mt-2 text-xs text-text-tertiary"> 
             <span> 已完成: ¥750,000 </span> 
             <span> 未完成: ¥250,000 </span> 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 毛利润目标 --> 
         <div class="bg-white rounded-lg card-shadow p-6"> 
          <div class="flex justify-between items-start mb-6"> 
           <div> 
            <h4 class="text-lg font-semibold mb-1"> 毛利润目标 </h4> 
            <p class="text-text-tertiary text-sm"> 截至当前毛利润完成情况 </p> 
           </div> 
           <span class="badge badge-warning"> 62% </span> 
          </div> 
          <div class="flex items-center"> 
           <div class="progress-ring-container"> 
            <canvas id="profitProgressRing"> 
            </canvas> 
            <div class="progress-ring-text"> 
             <div class="progress-ring-value">
               62% 
             </div> 
             <div class="progress-ring-label">
               完成率 
             </div> 
            </div> 
           </div> 
           <div class="ml-6 flex-1"> 
            <div class="flex justify-between items-end mb-1"> 
             <span class="text-2xl font-bold"> ¥310,000 </span> 
             <span class="text-text-tertiary text-sm"> 目标: ¥500,000 </span> 
            </div> 
            <div class="w-full bg-neutral rounded-full h-2"> 
             <div class="bg-secondary h-2 rounded-full" style="width: 62%"> 
             </div> 
            </div> 
            <div class="flex justify-between mt-2 text-xs text-text-tertiary"> 
             <span> 已完成: ¥310,000 </span> 
             <span> 未完成: ¥190,000 </span> 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 33f_目标进度看板页面:个人业绩总览 -- 包含年度销售额目标和毛利润目标两个环形进度条，显示完成率、当前完成额和目标额 --> 
       <!-- [MODULE] 45d_目标进度看板页面:个人业绩趋势图 --> 
       <div class="x"> 
        <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-chart-bar text-primary mr-2"> </i> 个人业绩趋势图 </h3> 
        <div class="bg-white rounded-lg card-shadow p-6 mb-8"> 
         <div class="flex justify-between items-center mb-6"> 
          <h4 class="text-lg font-semibold"> 按月销售业绩统计 </h4> 
          <div class="flex space-x-2"> 
           <button class="btn-outline text-sm px-3 py-1"> <i class="fas fa-calendar mr-1"> </i> 近6个月 </button> 
           <button class="btn-outline text-sm px-3 py-1"> <i class="fas fa-download mr-1"> </i> 导出 </button> 
          </div> 
         </div> 
         <div class="w-full h-80" id="performanceTrendChart"> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 45d_目标进度看板页面:个人业绩趋势图 -- 展示按月统计的销售业绩柱状图，可查看近6个月数据并支持导出 --> 
       <!-- [MODULE] 67e_目标进度看板页面:销售业绩排行榜 --> 
       <div class="x"> 
        <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-trophy text-primary mr-2"> </i> 销售业绩排行榜 </h3> 
        <div class="bg-white rounded-lg card-shadow p-6 mb-8"> 
         <div class="flex justify-between items-center mb-6"> 
          <h4 class="text-lg font-semibold"> 团队成员累计销售额排行 </h4> 
          <span class="text-text-tertiary text-sm"> 数据更新时间: 2023-10-15 </span> 
         </div> 
         <div class="overflow-x-auto"> 
          <table class="min-w-full divide-y divide-neutral-dark"> 
           <thead> 
            <tr> 
             <th class="table-header text-left w-16"> 排名 </th> 
             <th class="table-header text-left"> 姓名 </th> 
             <th class="table-header text-left"> 部门 </th> 
             <th class="table-header text-left"> 累计销售额 </th> 
             <th class="table-header text-left"> 完成率 </th> 
             <th class="table-header text-left"> 同比增长 </th> 
            </tr> 
           </thead> 
           <tbody class="divide-y divide-neutral-dark"> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 font-bold mr-2">
                 1 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="李娜" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969787710210048000/1b5d6ff837ef4f6981960cb8898d18bb.png"> 
               <div> 
                <div class="font-medium">
                  李娜 
                </div> 
                <div class="text-xs text-text-tertiary mt-0.5">
                  销售一部 
                </div> 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 销售一部 </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> ¥920,500 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-full bg-neutral rounded-full h-2 mr-2 flex-1"> 
                <div class="bg-green-500 h-2 rounded-full" style="width: 92%"> 
                </div> 
               </div> 
               <span class="text-sm font-medium"> 92% </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="text-green-500 font-medium"> +15.2% </span> </td> 
            </tr> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold mr-2">
                 2 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="张明" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969787710210048000/2921fdd70368a12d902153e46f035c63.png"> 
               <div> 
                <div class="font-medium">
                  张明 
                </div> 
                <div class="text-xs text-text-tertiary mt-0.5">
                  销售二部 
                </div> 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 销售二部 </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> ¥750,000 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-full bg-neutral rounded-full h-2 mr-2 flex-1"> 
                <div class="bg-primary h-2 rounded-full" style="width: 75%"> 
                </div> 
               </div> 
               <span class="text-sm font-medium"> 75% </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="text-green-500 font-medium"> +8.7% </span> </td> 
            </tr> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 font-bold mr-2">
                 3 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="王强" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969787710210048000/2921fdd70368a12d902153e46f035c63.png"> 
               <div> 
                <div class="font-medium">
                  王强 
                </div> 
                <div class="text-xs text-text-tertiary mt-0.5">
                  销售一部 
                </div> 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 销售一部 </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> ¥680,300 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-full bg-neutral rounded-full h-2 mr-2 flex-1"> 
                <div class="bg-orange-500 h-2 rounded-full" style="width: 68%"> 
                </div> 
               </div> 
               <span class="text-sm font-medium"> 68% </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="text-green-500 font-medium"> +5.3% </span> </td> 
            </tr> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold mr-2">
                 4 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="陈静" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969787710210048000/1b5d6ff837ef4f6981960cb8898d18bb.png"> 
               <div> 
                <div class="font-medium">
                  陈静 
                </div> 
                <div class="text-xs text-text-tertiary mt-0.5">
                  销售三部 
                </div> 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 销售三部 </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> ¥620,800 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-full bg-neutral rounded-full h-2 mr-2 flex-1"> 
                <div class="bg-blue-500 h-2 rounded-full" style="width: 62%"> 
                </div> 
               </div> 
               <span class="text-sm font-medium"> 62% </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="text-green-500 font-medium"> +12.1% </span> </td> 
            </tr> 
            <tr class="table-row hover:bg-neutral/50"> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold mr-2">
                 5 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <img alt="刘伟" class="w-8 h-8 rounded-full object-cover mr-3" src="./1969787710210048000/2921fdd70368a12d902153e46f035c63.png"> 
               <div> 
                <div class="font-medium">
                  刘伟 
                </div> 
                <div class="text-xs text-text-tertiary mt-0.5">
                  销售二部 
                </div> 
               </div> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 销售二部 </td> 
             <td class="px-4 py-4 whitespace-nowrap font-semibold"> ¥580,200 </td> 
             <td class="px-4 py-4 whitespace-nowrap"> 
              <div class="flex items-center"> 
               <div class="w-full bg-neutral rounded-full h-2 mr-2 flex-1"> 
                <div class="bg-purple-500 h-2 rounded-full" style="width: 58%"> 
                </div> 
               </div> 
               <span class="text-sm font-medium"> 58% </span> 
              </div> </td> 
             <td class="px-4 py-4 whitespace-nowrap"> <span class="text-red-500 font-medium"> -2.7% </span> </td> 
            </tr> 
           </tbody> 
          </table> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 67e_目标进度看板页面:销售业绩排行榜 -- 展示团队成员累计销售额排行，包含排名、姓名、部门、累计销售额、完成率和同比增长 --> 
       <!-- [MODULE] 78f_目标进度看板页面:客户目标 --> 
       <div class="x"> 
        <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-users text-primary mr-2"> </i> 客户目标 </h3> 
        <!-- 客户数据概览 --> 
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-4 mb-6"> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            总客户数 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             128 
           </div> 
           <div class="text-green-500 text-sm flex items-center"> 
            <i class="fas fa-arrow-up mr-1"> </i> 12% 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 较上月新增14家 
          </div> 
         </div> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            老客户数 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             86 
           </div> 
           <div class="text-green-500 text-sm flex items-center"> 
            <i class="fas fa-arrow-up mr-1"> </i> 8% 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 复购率68% 
          </div> 
         </div> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            新拓总商机数 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             45 
           </div> 
           <div class="text-red-500 text-sm flex items-center"> 
            <i class="fas fa-arrow-down mr-1"> </i> 5% 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 线上28，线下17 
          </div> 
         </div> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            已成交客户数 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             32 
           </div> 
           <div class="text-green-500 text-sm flex items-center"> 
            <i class="fas fa-arrow-up mr-1"> </i> 15% 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 本月新增5家 
          </div> 
         </div> 
         <div class="stat-card"> 
          <div class="text-text-tertiary text-sm mb-1">
            询盘数 
          </div> 
          <div class="flex items-end justify-between"> 
           <div class="text-2xl font-bold">
             126 
           </div> 
           <div class="text-green-500 text-sm flex items-center"> 
            <i class="fas fa-arrow-up mr-1"> </i> 22% 
           </div> 
          </div> 
          <div class="mt-3 text-xs text-text-tertiary"> 
           <i class="fas fa-info-circle mr-1"> </i> 转化率25.4% 
          </div> 
         </div> 
        </div> 
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> 
         <!-- 老客户目标分析 --> 
         <div class="bg-white rounded-lg card-shadow p-6"> 
          <h4 class="text-lg font-semibold mb-4"> 老客户目标分析 </h4> 
          <div class="grid grid-cols-2 gap-4 mb-6"> 
           <div> 
            <div class="text-text-tertiary text-sm mb-1">
              业绩金额目标 
            </div> 
            <div class="text-2xl font-bold">
              ¥500,000 
            </div> 
           </div> 
           <div> 
            <div class="text-text-tertiary text-sm mb-1">
              已完成 
            </div> 
            <div class="text-2xl font-bold text-green-500">
              ¥380,000 
            </div> 
           </div> 
           <div> 
            <div class="text-text-tertiary text-sm mb-1">
              未完成 
            </div> 
            <div class="text-2xl font-bold text-red-500">
              ¥120,000 
            </div> 
           </div> 
           <div> 
            <div class="text-text-tertiary text-sm mb-1">
              完成率 
            </div> 
            <div class="text-2xl font-bold">
              76% 
            </div> 
           </div> 
          </div> 
          <div class="grid grid-cols-2 gap-4 text-center"> 
           <div class="bg-neutral rounded-lg p-3"> 
            <div class="text-2xl font-bold mb-1">
              86 
            </div> 
            <div class="text-text-tertiary text-sm">
              成交老客户数 
            </div> 
           </div> 
           <div class="bg-neutral rounded-lg p-3"> 
            <div class="text-2xl font-bold mb-1">
              ¥4,419 
            </div> 
            <div class="text-text-tertiary text-sm">
              平均客单价 
            </div> 
           </div> 
           <div class="bg-neutral rounded-lg p-3 col-span-2"> 
            <div class="text-2xl font-bold mb-1">
              68% 
            </div> 
            <div class="text-text-tertiary text-sm">
              复购率 (已成交/老客户数) 
            </div> 
           </div> 
          </div> 
         </div> 
         <!-- 新客户目标分析 --> 
         <div class="bg-white rounded-lg card-shadow p-6"> 
          <h4 class="text-lg font-semibold mb-4"> 新客户目标分析 </h4> 
          <div class="grid grid-cols-2 gap-4 mb-6"> 
           <div> 
            <div class="text-text-tertiary text-sm mb-1">
              业绩金额目标 
            </div> 
            <div class="text-2xl font-bold">
              ¥300,000 
            </div> 
           </div> 
           <div> 
            <div class="text-text-tertiary text-sm mb-1">
              已完成 
            </div> 
            <div class="text-2xl font-bold text-green-500">
              ¥170,000 
            </div> 
           </div> 
           <div> 
            <div class="text-text-tertiary text-sm mb-1">
              未完成 
            </div> 
            <div class="text-2xl font-bold text-red-500">
              ¥130,000 
            </div> 
           </div> 
           <div> 
            <div class="text-text-tertiary text-sm mb-1">
              完成率 
            </div> 
            <div class="text-2xl font-bold">
              57% 
            </div> 
           </div> 
          </div> 
          <div class="grid grid-cols-2 gap-4 text-center"> 
           <div class="bg-neutral rounded-lg p-3"> 
            <div class="text-2xl font-bold mb-1">
              28 
            </div> 
            <div class="text-text-tertiary text-sm">
              线上商机数 
            </div> 
           </div> 
           <div class="bg-neutral rounded-lg p-3"> 
            <div class="text-2xl font-bold mb-1">
              17 
            </div> 
            <div class="text-text-tertiary text-sm">
              线下商机数 
            </div> 
           </div> 
           <div class="bg-neutral rounded-lg p-3"> 
            <div class="text-2xl font-bold mb-1">
              32 
            </div> 
            <div class="text-text-tertiary text-sm">
              成交新客户数 
            </div> 
           </div> 
           <div class="bg-neutral rounded-lg p-3"> 
            <div class="text-2xl font-bold mb-1">
              29% 
            </div> 
            <div class="text-text-tertiary text-sm">
              商机转化率 
            </div> 
           </div> 
          </div> 
         </div> 
        </div> 
        <div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8"> 
         <!-- 客户来源分析 --> 
         <div class="bg-white rounded-lg card-shadow p-6"> 
          <h4 class="text-lg font-semibold mb-6"> 客户来源分析 </h4> 
          <div class="h-64"> 
           <div class="w-full h-full" id="customerSourceChart"> 
           </div> 
          </div> 
         </div> 
         <!-- 客户区域分析 --> 
         <div class="bg-white rounded-lg card-shadow p-6"> 
          <h4 class="text-lg font-semibold mb-6"> 客户区域分析 </h4> 
          <div class="h-64"> 
           <div class="w-full h-full" id="customerRegionChart"> 
           </div> 
          </div> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 78f_目标进度看板页面:客户目标 -- 包含客户数据概览卡片、老客户目标分析、新客户目标分析、客户来源分析饼图和客户区域分析饼图 --> 
       <!-- [MODULE] 89g_目标进度看板页面:产品销售分析 --> 
       <div class="x"> 
        <h3 class="text-xl font-bold mb-4 flex items-center"> <i class="fas fa-boxes text-primary mr-2"> </i> 产品销售分析 </h3> 
        <div class="bg-white rounded-lg card-shadow p-6 mb-6"> 
         <div class="flex justify-between items-center mb-6"> 
          <h4 class="text-lg font-semibold"> 产品销售总数量 </h4> 
          <div class="text-2xl font-bold">
            12,580 
          </div> 
         </div> 
         <div class="h-80"> 
          <div class="w-full h-full" id="topProductsChart"> 
          </div> 
         </div> 
        </div> 
       </div> 
       <!-- [/MODULE] 89g_目标进度看板页面:产品销售分析 -- 展示产品销售总数量和卖得最好的TOP 5产品柱状图 --> 
      </div> 
     </div> 
     <!-- [/MODULE] d23_目标进度看板页面 -- 包含个人业绩总览、个人业绩趋势图、销售业绩排行榜、客户目标和产品销售分析等模块 --> 
    </main> 
    <!-- [/MODULE] abc_主内容区域 -- 包含目标进度看板页面 --> 
    <!-- 其他页面内容保持不变 --> 
    <div class="page hidden" id="page-company-culture"> 
    </div> 
    <div class="page hidden" id="page-work-dashboard"> 
    </div> 
    <div class="page hidden" id="page-meeting-plan"> 
    </div> 
    <div class="page hidden" id="page-work-tasks"> 
    </div> 
    <div class="page hidden" id="page-monthly-tasks"> 
    </div> 
    <div class="page hidden" id="page-latest-announcements"> 
    </div> 
    <div class="page hidden" id="page-historical-announcements"> 
    </div> 
    <div class="page hidden" id="page-performance-entry"> 
    </div> 
    <div class="page hidden" id="page-product-library"> 
    </div> 
    <div class="page hidden" id="page-marketing-plan"> 
    </div> 
    <div class="page hidden" id="page-customer-records"> 
    </div> 
    <div class="page hidden" id="page-pk-activities"> 
    </div> 
    <div class="page hidden" id="page-course-center"> 
    </div> 
    <div class="page hidden" id="page-knowledge-base"> 
    </div> 
    <div class="page hidden" id="page-learning-plan"> 
    </div> 
    <div class="page hidden" id="page-basic-info"> 
    </div> 
    <div class="page hidden" id="page-account-settings"> 
    </div> 
   </div> 
  </main> 
  <!-- [JSMOD] eft_页面交互逻辑 --> 
  <script id="page-interaction">// 页面加载时初始化
        document.addEventListener('DOMContentLoaded', () => {
            // 菜单切换功能
            const menuItems = document.querySelectorAll('.menu-item[data-menu]');
            menuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有菜单的活动状态
                    document.querySelectorAll('.menu-item').forEach(menu => { menu.classList.remove('menu-item-active'); });
                    
                    // 添加当前菜单的活动状态
                    item.classList.add('menu-item-active'); 
                    
                    const menuId = item.getAttribute('data-menu');
                    const submenu = document.getElementById(`submenu-${menuId}`);
                    const icon = item.querySelector('i:last-child');
                    
                    // 切换子菜单显示/隐藏
                    if (submenu.classList.contains('hidden')) {
                        submenu.classList.remove('hidden');
                        icon.classList.remove('fa-chevron-right');
                        icon.classList.add('fa-chevron-down');
                    } else {
                        submenu.classList.add('hidden');
                        icon.classList.remove('fa-chevron-down');
                        icon.classList.add('fa-chevron-right');
                    }
                });
            });
            
            // 子菜单切换功能
            const submenuItems = document.querySelectorAll('.submenu-item[data-page]');
            submenuItems.forEach(item => {
                item.addEventListener('click', () => {
                    // 移除所有子菜单的活动状态
                    document.querySelectorAll('.submenu-item').forEach(submenu => { submenu.classList.remove('submenu-item-active'); });
                    
                    // 添加当前子菜单的活动状态
                    item.classList.add('submenu-item-active');
                    
                    // 获取页面ID和面包屑信息
                    const pageId = item.getAttribute('data-page');
                    const parentMenu = item.closest('.submenu').id.replace('submenu-', '');
                    const parentMenuText = document.querySelector(`.menu-item[data-menu="${parentMenu}"] span`).textContent;
                    const currentMenuText = item.querySelector('span').textContent;
                    
                    // 更新面包屑
                    document.getElementById('breadcrumb').innerHTML = `



<span>${parentMenuText}</span>
  <i class="fas fa-angle-right mx-2 text-xs">
  </i>
  <span>${currentMenuText}</span>
    
    
    
  `;
                    
                    // 切换页面显示
                    document.querySelectorAll('.page').forEach(page => { page.classList.add('hidden'); });
                    document.getElementById(`page-${pageId}`).classList.remove('hidden');
                });
            });
            
            // 侧边栏切换功能
            const toggleSidebar = document.getElementById('toggle-sidebar');
            const sidebar = document.getElementById('sidebar');
            toggleSidebar.addEventListener('click', () => {
                if (sidebar.classList.contains('w-220')) {
                    sidebar.classList.remove('w-220');  
                    sidebar.classList.add('w-20');
                    // 隐藏菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.add('hidden'); });
                    document.querySelectorAll('.submenu').forEach(submenu => { submenu.classList.add('hidden'); });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.add('hidden'); });
                } else {
                    sidebar.classList.remove('w-20');
                    sidebar.classList.add('w-220');
                    // 显示菜单文本
                    document.querySelectorAll('.menu-item span:first-of-type').forEach(text => { text.classList.remove('hidden'); });
                    // 恢复之前打开的子菜单
                    document.querySelectorAll('.menu-item-active').forEach(menu => {
                        const menuId = menu.getAttribute('data-menu');
                        const submenu = document.getElementById(`submenu-${menuId}`);
                        if (submenu) { submenu.classList.remove('hidden'); }
                    });
                    document.querySelectorAll('.menu-item i:last-child').forEach(icon => { icon.classList.remove('hidden'); });
                }
            });
        });</script> 
  <!-- [/JSMOD] eft_页面交互逻辑 -- 处理菜单切换、子菜单切换和侧边栏切换功能 --> 
  <!-- [JSMOD] fgh_图表渲染逻辑 --> 
  <script id="chart-rendering">// 页面加载时初始化图表
        document.addEventListener('DOMContentLoaded', () => {
            // 渲染销售额进度环
            renderProgressRing('salesProgressRing', 75, '#165DFF');
            
            // 渲染毛利润进度环
            renderProgressRing('profitProgressRing', 62, '#4080FF');
            
            // 渲染个人业绩趋势图
            renderPerformanceTrendChart();
            
            // 渲染客户来源分析饼图
            renderCustomerSourceChart();
            
            // 渲染客户区域分析饼图
            renderCustomerRegionChart();
            
            // 渲染产品销售分析图
            renderTopProductsChart();
            
            // 监听窗口大小变化，重绘图表
            window.addEventListener('resize', () => {
                if (window.performanceTrendChart) {
                    window.performanceTrendChart.resize();
                }
                if (window.topProductsChart) {
                    window.topProductsChart.resize();
                }
            });
        });
        
        // 渲染环形进度条
        function renderProgressRing(elementId, percentage, color) {
            const canvas = document.getElementById(elementId);
            const ctx = canvas.getContext('2d');
            const width = canvas.width;
            const height = canvas.height;
            const centerX = width / 2;
            const centerY = height / 2;
            const radius = Math.min(width, height) / 2 - 10;
            const lineWidth = 8;
            const startAngle = -Math.PI / 2;
            const endAngle = startAngle + 2 * Math.PI * percentage / 100;
            
            // 清除画布
            ctx.clearRect(0, 0, width, height);
            
            // 绘制背景圆环
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
            ctx.strokeStyle = '#F5F7FA';
            ctx.lineWidth = lineWidth;
            ctx.stroke();
            
            // 绘制进度圆环
            ctx.beginPath();
            ctx.arc(centerX, centerY, radius, startAngle, endAngle);
            ctx.strokeStyle = color;
            ctx.lineWidth = lineWidth;
            ctx.lineCap = 'round';
            ctx.stroke();
        }
        
        // 渲染个人业绩趋势图
        function renderPerformanceTrendChart() {
            const chartDom = document.getElementById('performanceTrendChart');
            const myChart = echarts.init(chartDom);
            
            const option = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b}: ¥{c}'
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: {
                    type: 'category',
                    data: ['5月', '6月', '7月', '8月', '9月', '10月'],
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                },
                yAxis: {
                    type: 'value',
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#F5F7FA'
                        }
                    },
                    formatter: function(value) {
                        if (value >= 10000) {
                            return '¥' + (value / 10000).toFixed(1) + 'w';
                        }
                        return '¥' + value;
                    }
                },
                series: [
                    {
                        name: '销售额',
                        type: 'bar',
                        data: [120000, 105000, 135000, 110000, 140000, 140000],
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {offset: 0, color: '#165DFF'},
                                {offset: 1, color: '#4080FF'}
                            ]),
                            borderRadius: [4, 4, 0, 0]
                        },
                        barWidth: '60%'
                    }
                ]
            };
            
            myChart.setOption(option);
            window.performanceTrendChart = myChart;
        }
        
        // 渲染客户来源分析饼图
        function renderCustomerSourceChart() {
            const ctx = document.getElementById('customerSourceChart').getContext('2d');
            
            const chart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['阿里国际站', '自主开发', '老客户转介绍', '展会', '其他渠道'],
                    datasets: [{
                        data: [35, 25, 20, 15, 5],
                        backgroundColor: [
                            '#165DFF',
                            '#4080FF',
                            '#0E42D2',
                            '#86909C',
                            '#C9CDD4'
                        ],
                        borderWidth: 0,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        }
                    },
                    cutout: '65%'
                }
            });
        }
        
        // 渲染客户区域分析饼图
        function renderCustomerRegionChart() {
            const ctx = document.getElementById('customerRegionChart').getContext('2d');
            
            const chart = new Chart(ctx, {
                type: 'doughnut',
                data: {
                    labels: ['华东地区', '华南地区', '华北地区', '西部地区', '海外市场'],
                    datasets: [{
                        data: [40, 25, 15, 10, 10],
                        backgroundColor: [
                            '#165DFF',
                            '#36CFC9',
                            '#FF7D00',
                            '#F5222D',
                            '#722ED1'
                        ],
                        borderWidth: 0,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            position: 'right',
                            labels: {
                                padding: 20,
                                usePointStyle: true,
                                pointStyle: 'circle'
                            }
                        }
                    },
                    cutout: '65%'
                }
            });
        }
        
        // 渲染产品销售分析图
        function renderTopProductsChart() {
            const ctx = document.getElementById('topProductsChart').getContext('2d');
            
            const chart = new Chart(ctx, {
                type: 'bar',
                data: {
labels: ['智能手表 Pro', '无线耳机 Max', '运动手环 Lite', '智能音箱 Mini', '健康监测仪'],
                    datasets: [{
                        label: '销售数量',
                        data: [3200, 2800, 2400, 1800, 1500],
                        backgroundColor: [
                            'rgba(22, 93, 255, 0.8)',
                            'rgba(64, 128, 255, 0.8)',
                            'rgba(14, 66, 210, 0.8)',
                            'rgba(134, 144, 156, 0.8)',
                            'rgba(201, 205, 212, 0.8)'
                        ],
                        borderColor: [
                            'rgba(22, 93, 255, 1)',
                            'rgba(64, 128, 255, 1)',
                            'rgba(14, 66, 210, 1)',
                            'rgba(134, 144, 156, 1)',
                            'rgba(201, 205, 212, 1)'
                        ],
                        borderWidth: 1,
                        borderRadius: 4
                    }]
                },
                options: {
                    responsive: true,
                    maintainAspectRatio: false,
                    plugins: {
                        legend: {
                            display: false
                        }
                    },
                    scales: {
                        y: {
                            beginAtZero: true,
                            grid: {
                                color: '#F5F7FA'
                            }
                        },
                        x: {
                            grid: {
                                display: false
                            }
                        }
                    }
                }
            });
            window.topProductsChart = chart;
        }</script> 
  <!-- [/JSMOD] fgh_图表渲染逻辑 -- 负责所有图表的初始化和渲染，包括环形进度条、柱状图和饼图 -->   
  <!-- [JSMOD] 123_图表初始化 --> 
  <script id="chart-initialization">// 页面加载时初始化渲染
document.addEventListener('DOMContentLoaded', () => {
  // 初始化客户来源分析图表
  const customerSourceChart = echarts.init(document.getElementById('customerSourceChart'));
  const customerSourceOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '客户来源',
        type: 'pie',
        radius: '80%',
        data: [
          { value: 35, name: '线上推广' },
          { value: 25, name: '线下活动' },
          { value: 20, name: '客户推荐' },
          { value: 15, name: '合作伙伴' },
          { value: 5, name: '其他渠道' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  customerSourceChart.setOption(customerSourceOption);

  // 初始化客户区域分析图表
  const customerRegionChart = echarts.init(document.getElementById('customerRegionChart'));
  const customerRegionOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      orient: 'vertical',
      left: 'left'
    },
    series: [
      {
        name: '客户区域',
        type: 'pie',
        radius: '80%',
        data: [
          { value: 30, name: '华东地区' },
          { value: 25, name: '华南地区' },
          { value: 20, name: '华北地区' },
          { value: 15, name: '西部地区' },
          { value: 10, name: '东北地区' }
        ],
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  };
  customerRegionChart.setOption(customerRegionOption);

  // 初始化产品销售分析图表
  const topProductsChart = echarts.init(document.getElementById('topProductsChart'));
  const topProductsOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['产品A', '产品B', '产品C', '产品D', '产品E']
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: '销售数量',
        type: 'bar',
        data: [3200, 2800, 2400, 1800, 1500],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#165DFF' },
            { offset: 1, color: '#4080FF' }
          ])
        }
      }
    ]
  };
  topProductsChart.setOption(topProductsOption);

  // 监听窗口大小变化，调整图表大小
  window.addEventListener('resize', () => {
    customerSourceChart.resize();
    customerRegionChart.resize();
    topProductsChart.resize();
  });
});</script> 
  <!-- [/JSMOD] 123_图表初始化 -- 初始化客户来源分析、客户区域分析和产品销售分析图表，并监听窗口大小变化调整图表尺寸 -->
 </body>
</html>